<template>
	<view class="word-card-back">
		<view class="word-card-backview" @click="planBeeDetall">
			<view class="word-card">
				<view class="word-back-img"></view>
				<view class="card-01">
					<view class="card-left">
						<view class="card-02">
							{{planCardData.name}}
						</view>
						<view class="card-03" v-if="planCardData.wordThesaurus">
							{{planCardData.wordThesaurus.name}}
						</view>
						<view class="card-04">
							<view class="card-item">
								<view class="card-05">
									{{planCardData.allWordCount}}
								</view>
								<view class="card-06">
									全部单词
								</view>
							</view>
							<view class="card-item">
								<view class="card-05">
									{{planCardData.allWordCount - planCardData.clockWordCount}}
								</view>
								<view class="card-06">
									剩余词汇
								</view>
							</view>
							<view class="card-item">
								<view class="card-05">
									{{planCardData.clockDays}}
								</view>
								<view class="card-06">
									打卡天数
								</view>
							</view>
						</view>
					</view>
					<view class="card-right">
						<view class="card-07">
							掌握单词数
						</view>
						<view class="card-08">
							<canvas canvas-id="progressCanvas" style="width: 70px; height: 70px;"></canvas>
							<div class="card-09">
								{{planCardData.clockWordCount}}
							</div>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				planCardData: {
					name: '请创建您的蜂计划',
					allWordCount: 0, 
					clockWordCount: 0,
					finishDays: 0,
					clockDays: 0,
					wordThesaurus: {
						name: 'please create your bee plan'
					}
				},
				progress: 0,
				progressNumber: 0,
				intervalId: null,
				numIntervalId: null
			}
		},
		onReady() {},
		mounted() {
			this.startAnimation(this.planCardData);
		},
		beforeDestroy() {
			// 在组件销毁前清除定时器  
			if (this.intervalId) {
				clearInterval(this.intervalId);
				this.intervalId = null;
			}
			if (this.numIntervalId) {
				clearInterval(this.numIntervalId);
				this.numIntervalId = null;
			}
		},
		methods: {
			drawArcProgress() {
				const ctx = uni.createCanvasContext('progressCanvas', this);
				// 清除画布  
				ctx.clearRect(0, 0, 70, 70);
				// 绘制圆弧  
				const centerX = 35; // 圆心X坐标  
				const centerY = 35; // 圆心Y坐标  
				const radius = 30; // 半径（考虑到边框，半径需要小于50）  
				const startAngle = -Math.PI / 2; // 从顶部开始  
				const endAngle = startAngle + (this.progress / 100) * 2 * Math.PI; // 结束角度  

				// 绘制背景圆弧（可选）  
				ctx.setStrokeStyle('#ddd');
				ctx.setLineWidth(5);
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, startAngle, startAngle + 2 * Math.PI);
				ctx.stroke();

				// 绘制进度圆弧  
				ctx.setStrokeStyle('#ffca60');
				ctx.setLineWidth(5);
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, startAngle, endAngle);
				ctx.stroke();

				// 绘制完成  
				ctx.draw(true);
			},
			startAnimation(planCardData) {
				console.log('planCardData', planCardData)
				this.planCardData = planCardData;
				if (this.planCardData.allWordCount != 0) {
					// 赋值为1为了显示进度圆，不影响数据显示
					const clockWordCountNum = this.planCardData.clockWordCount == 0 ? 1 : this.planCardData.clockWordCount;
					this.intervalId = setInterval(() => {
						const progressNum = clockWordCountNum / this.planCardData.allWordCount *
						100;
						if (this.progress < progressNum) {
							this.progress += 1; // 每次增加1点进度  
							this.drawArcProgress();
						} else {
							// 进度达到100，清除定时器  
							clearInterval(this.intervalId);
							this.intervalId = null;
						}
					}, 20); // 每20毫秒更新一次，约等于每秒50次  
				} else {
					this.progress = 0
					this.drawArcProgress();
				}
				this.numIntervalId = setInterval(() => {
					if (this.progressNumber < (this.planCardData.clockWordCount)) {
						this.progressNumber++;
					} else {
						clearInterval(this.numIntervalId); // 清除定时器 
						this.numIntervalId = null;
					}
				}, 10); // 每隔 50 毫秒更新一次  
			},
			planBeeDetall () {
				this.$emit('planBeeClicked', this.planCardData);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.word-card-back {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.word-card-backview {
		width: 94%;
		margin: 15px 0px;
		border-radius: 12px;
		box-sizing: border-box;
		box-shadow: 0px 8px 0px 0px #9b8b6f;
		// position: relative;
	}

	.word-back-img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-image: url(../../static/image/fjh/word_app_plan_back.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.word-card {
		width: 100%;
		padding: 20px;
		position: relative;
		border-radius: 12px;
		display: flex;
		z-index: 100;
		flex-direction: column;
		align-items: center;
		background: var(--themeBlackTopBack);

		.card-01 {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.card-left {
				width: 70%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.card-02 {
					width: 90%;
					font-size: 16px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: white;
					font-family: 'hzgb';
					text-align: left;
				}

				.card-03 {
					width: 90%;
					font-size: 9px;
					color: white;
					font-family: 'hzgb';
					margin-top: 5px;
					margin-bottom: 15px;
					font-family: 'hzgb';
					text-align: left;
				}

				.card-04 {
					width: 100%;
					padding: 10px 0px;
					border-radius: 8px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;
					background-color: rgba(82, 81, 74, 0.9);

					.card-item {
						width: 80px;
						display: flex;
						flex-direction: column;
						align-items: center;

						.card-05 {
							width: 100%;
							text-align: center;
							color: white;
							font-size: 15px;
							font-weight: 700;
						}

						.card-06 {
							width: 100%;
							text-align: center;
							color: white;
							font-size: 8px;
						}
					}
				}
			}

			.card-right {
				width: 100px;
				display: flex;
				flex-direction: column;
				align-items: self-end;

				.card-07 {
					width: 100%;
					font-size: 12px;
					font-family: 'hzgb';
					color: white;
					text-align: center;
				}

				.card-08 {
					width: 100px;
					height: 100px;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.card-09 {
					width: 70px;
					height: 70px;
					top: 15px;
					left: 15px;
					color: white;
					font-family: 'hzgb';
					font-size: 16px;
					text-align: center;
					line-height: 70px;
					position: absolute;
				}
			}
		}
	}
	.card-button {
		width: 160px;
		height: 32px;
		display: inline-block;
		text-align: center;
		margin-bottom: 5px;
		margin-top: 10px;
		color: black;
		font-size: 12px;
		text-align: center;
		font-family: 'hzgb';
		line-height: 32px;
		background: linear-gradient(to bottom, rgba(255, 202, 97, 1), rgba(255, 242, 139, 1));
		border-radius: 32px;
		box-shadow: 0px 4px 0px 0px #d4a750;
		position: relative;
		z-index: 10;
	}
</style>